<template>
  <div class="budget-wrap">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-fa fa-newspaper-o"></i> 金额查询
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="container">
      <div class="table">

        <el-button @click="export2Excel">导出账单</el-button>

        <div v-show="popup" @click="closepopup">
          <!--这里是要展示的内容层-->
          <div class="login">
            <p style="text-align: center;line-height: 20px;">{{payType}}扫一扫付款（元）</p>
            <p style="text-align: center;font-size: 24px;color: #fa920e;padding: 5px 0px;font-weight: bold;">{{money}}</p>
            <div class="codeBox" style="text-align: center">
              <!--<div id="qrcode"></div>-->
              <vue-qr :logoSrc="imageUrl" text="xxx" :size="180"></vue-qr>
              <div class="clearfix" style="margin: 0 auto; width: 130px;font-size: 12px;">
                <div style="float: left;">
                  <svg t="1561615212373" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="976" data-spm-anchor-id="a313x.7781069.0.i3" width="40" height="40"><path d="M295.7312 111.52384h-83.95776c-56.80128 0-103.00416 46.20288-103.00416 103.00416v83.968c0 10.496 8.54016 19.0464 19.0464 19.0464h0.01024c10.50624 0 19.0464-8.5504 19.0464-19.0464v-83.968a64.9728 64.9728 0 0 1 64.91136-64.91136h83.95776c10.50624 0 19.0464-8.5504 19.0464-19.0464s-8.5504-19.0464-19.05664-19.0464zM812.22656 108.99456H728.2688a21.6064 21.6064 0 0 0-21.57568 21.57568 21.6064 21.6064 0 0 0 21.57568 21.58592h83.95776a62.464 62.464 0 0 1 62.38208 62.38208v83.968a21.6064 21.6064 0 0 0 21.58592 21.57568 21.6064 21.6064 0 0 0 21.57568-21.57568v-83.968c0-58.19392-47.34976-105.53344-105.54368-105.54368zM896.19456 703.93856a21.6064 21.6064 0 0 0-21.57568 21.57568v83.95776a62.464 62.464 0 0 1-62.38208 62.38208h-83.968a21.6064 21.6064 0 0 0-21.57568 21.58592 21.6064 21.6064 0 0 0 21.57568 21.57568h83.95776c58.19392 0 105.53344-47.33952 105.53344-105.53344v-83.95776a21.58592 21.58592 0 0 0-21.56544-21.58592z" fill="#fa920e" p-id="977" data-spm-anchor-id="a313x.7781069.0.i4" class="selected"></path><path d="M295.7312 108.99456h-83.95776c-58.19392 0-105.53344 47.34976-105.53344 105.53344v83.968a21.6064 21.6064 0 0 0 21.58592 21.57568 21.6064 21.6064 0 0 0 21.57568-21.57568v-83.968a62.464 62.464 0 0 1 62.38208-62.38208h83.95776a21.6064 21.6064 0 0 0 21.57568-21.58592 21.61664 21.61664 0 0 0-21.58592-21.56544zM295.7312 871.84384h-83.95776a62.464 62.464 0 0 1-62.38208-62.38208V725.504a21.6064 21.6064 0 0 0-21.58592-21.57568 21.6064 21.6064 0 0 0-21.57568 21.57568v83.95776c0 58.19392 47.34976 105.53344 105.53344 105.53344h83.95776a21.6064 21.6064 0 0 0 21.58592-21.57568 21.6064 21.6064 0 0 0-21.57568-21.57568zM812.22656 111.52384H728.2688c-10.50624 0-19.0464 8.54016-19.0464 19.0464s8.54016 19.0464 19.0464 19.0464h83.95776a64.9728 64.9728 0 0 1 64.91136 64.91136v83.968c0 10.50624 8.5504 19.0464 19.0464 19.0464 10.50624 0 19.0464-8.54016 19.0464-19.0464v-83.968c0-56.79104-46.20288-102.99392-103.00416-103.00416z" fill="#fa920e" p-id="978" data-spm-anchor-id="a313x.7781069.0.i0" class="selected"></path><path d="M265.19552 297.13408h64.95232v208.39424h-64.95232zM369.11104 297.13408h38.97344v208.39424h-38.97344zM447.04768 297.13408H512v208.39424h-64.95232zM550.97344 297.13408h103.91552v208.39424H550.97344zM693.85216 297.13408h64.95232v208.39424h-64.95232zM265.19552 614.7584h64.95232v112.10752h-64.95232zM369.11104 614.7584h38.97344v112.10752h-38.97344zM447.04768 614.7584H512v112.10752h-64.95232zM550.97344 614.7584h103.91552v112.10752H550.97344zM693.85216 614.7584h64.95232v112.10752h-64.95232zM852.20352 538.79808H171.79648c-11.04896 0-20.00896 10.0352-20.00896 22.40512 0 12.36992 8.96 22.40512 20.00896 22.40512h680.3968c11.04896 0 20.00896-10.0352 20.00896-22.40512 0.01024-12.38016-8.94976-22.40512-19.99872-22.40512z" fill="#fa920e" p-id="979" data-spm-anchor-id="a313x.7781069.0.i1" class="selected"></path></svg>

                </div>
                <div><!--            style="float: left;line-height: 20px;margin-left: 5px;"-->
                  <p>打开手机{{payType}}</p>
                  <p>扫一扫继续付款</p>
                </div>
              </div>
            </div>
          </div>
          <!--这里是半透明背景层-->
          <div class="over"></div>
        </div>
        <el-table :data="tableData" stripe>
          <el-table-column label="项目Id" prop="memberEventId" />
          <el-table-column label="项目名" prop="eventName" />
          <el-table-column label="团长" prop="leaderName" />
          <el-table-column label="推荐指数" prop="rate" />
          <el-table-column label="标价" prop="bidPrice" />
          <el-table-column label="应付" prop="shouldPrice" />
          <el-table-column label="实付" prop="budget" />
          <el-table-column align="center" label="操作" width="200px">
          <template>
          <el-button class="rule" @click="showpopup"  size="mini">付款</el-button>
          </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from "../../api/member/event";
import vueQr from "vue-qr";
export default {
  name: "MemberBudget",
  data() {
    return {
      tableData: [],
      popup: 0
      // imageUrl: require("../assets/logo.png"),
    };
  },
  components: {
    vueQr
  },
  methods: {
    //打开活动规则页面
    showpopup() {
      this.popup = 1;
    },
    //关闭活动规则页面
    closepopup() {
      this.popup = 0;
    },
    getList() {
      api.list().then(res => {
        this.tableData = this.budgetFilter(res);
      });
    },
    budgetFilter(data) {
      let filtered = [];
      for (let i = 0; i < data.length; i++) {
        let item = data[i];
        if (
          item.bidPrice != null ||
          item.shouldPrice != null ||
          item.budget != null
        ) {
          filtered.push(item);
        }
      }
      return filtered;
    },
    export2Excel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('../../excel/Export2Excel');
        const tHeader = [
          "项目id",
          "项目名",
          "团长",
          "推荐指数",
          "标价",
          "应付",
          "实付"
        ];
        // 上面设置Excel的表格第一行的标题
        const filterVal = [
          "memberEventId",
          "eventName",
          "leaderName",
          "rate",
          "bidPrice",
          "shouldPrice",
          "budget"
        ];
        // 上面的index、phone_Num、school_Name是tableData里对象的属性
        const list = this.tableData;  //把data里的tableData存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, '账单');
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }


  },
  created() {
    this.getList();
  }
};
</script>

<style scoped>
  #qrcode {
    height: 150px;
    width: 150px;
    margin: 10px auto;
  }
  .login {
    position: fixed;
    font-size: 24px;
    height: 360px;
    width: 240px;
    background-color:ghostwhite;
    border-radius: 0.25rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
  }
  .over {
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    filter: alpha(opacity=70);
    top: 0;
    left: 0;
    z-index: 999;
    background-color: #111111;
  }
</style>


